<template>
  <div class="attendance-day-v2">
    <div class="search-bar">
      <el-row>
        <el-form :model="queryParams" inline size="mini">
          <el-row>
            <el-col :span="22">
              <el-form-item prop="date" label="考勤日期">
                <el-date-picker
                  v-model="queryParams.date"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                  :clearable="false"
                  @change="searchSubmit"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item prop="deptId" label="班组">
                <el-select v-model="queryParams.deptId" @change="searchSubmit">
                  <el-option
                    v-for="(v, k) in deptOptions"
                    :key="'a' + k"
                    :value="v.id"
                    :label="v.label"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="shiftId" label="考勤组">
                <el-select v-model="queryParams.groupId" @change="searchSubmit">
                  <!-- TODO 这个需要接口获取 -->
                  <el-option
                    v-for="(v, k) in groupOptions"
                    :key="'b' + k"
                    :label="v.name"
                    :value="v.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2" style="display:flex;justify-content:end">
              <el-button
                type="primary"
                size="small"
                @click="searchSubmit"
                v-loading.fullscreen.lock="loading"
                >搜索</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <el-row type="flex" align="bottom">
        <el-col :span="16">
          <div style="font-size:12px;" v-if="statistics.length > 0">
            考勤结果：
            <span v-if="status == 1" style="color:brown">已确认</span>
            <span v-else>未确认</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="display:flex;justify-content:end">
            <el-button
              size="small"
              @click="handleAttendanceInfo"
              :loading="btnLoading"
              >生成考勤</el-button
            >
            <el-button
              size="small"
              v-if="statistics.length > 0"
              @click="exportSignTimes"
              :loading="signTimesDownloadLoading"
              >打卡记录</el-button
            >
            <el-button
              size="small"
              v-if="statistics.length > 0"
              @click="exportDetails"
              :loading="downloadLoading"
              >导出</el-button
            >
            <el-button
              size="small"
              @click="toDetail"
              v-if="statistics.length > 0"
              >查看明细</el-button
            >
            <el-button
              size="small"
              v-if="statistics.length > 0 && !status"
              @click="attendanceConfirm"
              :loading="confirmLoading"
              >考勤确认</el-button
            >
          </div>
        </el-col>
      </el-row>
    </div>
    <el-empty description="当日无数据" v-if="statistics.length == 0"></el-empty>
    <div class="content" v-else>
      <!-- 汇总哟 -->
      <el-card class="box-card" v-for="(vx, kx) in statistics" :key="'c' + kx">
        <div slot="header" class="clearfix">
          <span>{{ vx.workType == 1 ? "白班汇总" : "夜班汇总" }}</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <div style="display:flex;justify-content:space-between">
          <div
            class="label-cube"
            v-for="(v, k) in Object.keys(statisticsLabels)"
            :key="'d' + k"
          >
            <div class="label-count">{{ vx[v] }}</div>
            <div class="label-txt">{{ statisticsLabels[v] }}</div>
          </div>
        </div>
      </el-card>
      <!-- 各级打卡 -->
      <el-card class="box-card" v-for="(v, k) in signDetails" :key="'e' + k">
        <div slot="header" class="clearfix">
          <!-- v.workType = 21 -->
          <span>{{ v.workType | labelFielter }}</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <div
          style="display:flex;width:63.5%;justify-content:space-between"
          v-if="v.workType == 21"
        >
          <div
            class="label-cube"
            v-for="(vi, ki) in Object.keys(downSignLabels)"
            :key="'f' + ki"
          >
            <div class="label-count">{{ v[vi] }}</div>
            <div class="label-txt">{{ downSignLabels[vi] }}</div>
          </div>
        </div>
        <div style="display:flex;justify-content:space-between" v-else>
          <div
            class="label-cube"
            v-for="(vi, ki) in Object.keys(signLabels)"
            :key="'f' + ki"
          >
            <div class="label-count">{{ v[vi] }}</div>
            <div class="label-txt">{{ signLabels[vi] }}</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  buildNewRecords,
  indexStatistics,
  downloadDetail,
  confirm,
  signTimesAtDate
} from "@/api/job/attendance/v2/attendanceApi";
export default {
  data() {
    return {
      btnLoading: false,
      deptOptions: [],
      groupOptions: [],
      loading: false,
      downloadLoading: false,
      signTimesDownloadLoading: false,
      confirmLoading: false,
      status: undefined, // 确认结果
      queryParams: {
        date: undefined,
        deptId: undefined,
        groupId: undefined
      },
      statisticsLabels: {
        total: "应到人数",
        result: "实到人数",
        quit: "离职人数",
        injure: "工伤人数",
        nol: "请假人数",
        absenteeism: "旷工人数"
      },
      statistics: [],
      signLabels: {
        normal: "正常",
        late: "普通迟到",
        normalLate: "一般迟到",
        seriouslyLate: "严重迟到",
        absenteeism: "旷工",
        absent: "缺卡"
      },
      downSignLabels: {
        normal: "正常",
        absenteeism: "旷工",
        leaveOfEarly: "早退",
        absent: "缺卡"
      },
      signDetails: []
    };
  },
  filters: {
    labelFielter(v) {
      switch (v) {
        case 11:
          return "早上上班";
        case 12:
          return "中午上班";
        case 13:
          return "下午上班";
        default:
          return "下班";
      }
    }
  },
  async created() {
    this.optionsInit();
  },
  /* computed: {
    queryParams: function() {
      return {
        deptId: this.deptOptions[0].id,
        groupId: this.groupOptions[0].id,
        workDate: this.defaultCheckDate()
      };
    }
  }, */
  methods: {
    statisticsMethod() {
      this.loading = true;
      indexStatistics(this.queryParams)
        .then(res => {
          this.loading = false;
          this.statistics = res.data.total || [];
          if (this.statistics.length > 0) {
            this.status = this.statistics[0].status;
          }
          this.signDetails = res.data.detail;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 执行搜搜
    searchSubmit() {
      if (
        !this.queryParams.deptId ||
        !this.queryParams.groupId ||
        !this.queryParams.date
      ) {
        this.$message.error("三个搜索条件都需要具备");
        return;
      }
      this.statisticsMethod();
    },
    // 生成新的考勤记录
    handleAttendanceInfo() {
      this.btnLoading = true;
      const date = this.queryParams.date || this.defaultCheckDate(); // 这个默认是昨天的
      buildNewRecords({ date })
        .then(res => {
          this.btnLoading = false;
          this.searchSubmit();
        })
        .catch(() => {
          this.btnLoading = false;
        });
    },
    // 默认查询日期
    defaultCheckDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month =
        date.getMonth() > 8
          ? "" + (date.getMonth() + 1)
          : "0" + (date.getMonth() + 1);
      const day =
        date.getDate() > 10
          ? "" + (date.getDate() - 1)
          : "0" + (date.getDate() - 1);
      return `${year}-${month}-${day}`;
    },
    // 可选项初始化
    optionsInit() {
      this.queryParams.date = this.defaultCheckDate();
      // this.queryParams.date = "2021-12-31";
      this.$store.dispatch("getDeptOptions").then(res => {
        this.deptOptions = res;
        this.queryParams.deptId = this.deptOptions[0].id;
        this.$store.dispatch("getGroupOptions").then(res => {
          this.groupOptions = res;
          this.queryParams.groupId = this.groupOptions[2].id;
          this.statisticsMethod();
        });
      });
    },
    toDetail() {
      this.$router.push({
        path: "/attendance/attendanceDayV2Detail",
        // path: "/job/attendanceDayV2/detail",
        query: { ...this.queryParams, status: this.status }
      });
    },
    // 日考勤明细
    exportDetails() {
      this.downloadLoading = true;
      downloadDetail(this.queryParams)
        .then(response => {
          this.downloadLoading = false;
          this.download(response.msg);
        })
        .catch(() => {
          this.downloadLoading = false;
        });
    },
    // 指定日期打卡记录
    exportSignTimes() {
      this.signTimesDownloadLoading = true;
      signTimesAtDate({ date: this.queryParams.date })
        .then(res => {
          this.signTimesDownloadLoading = false;
          this.download(res.msg);
        })
        .catch(() => {
          this.signTimesDownloadLoading = false;
        });
    },
    attendanceConfirm() {
      this.$confirm("确认考勤吗？", "确认", {}).then(cf => {
        this.confirmLoading = true;
        if (cf) {
          confirm(this.queryParams)
            .then(res => {
              this.confirmLoading = false;
              this.searchSubmit();
            })
            .catch(() => {
              this.confirmLoading = false;
            });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.attendance-day-v2 {
  height: 90vh;
  width: 100%;
  padding: 20px;
  background-color: #f8f8f8;

  overflow: hidden;
  overflow-y: scroll;

  .search-bar {
    height: 15%;
  }

  .label-count {
    font-size: 18pt;
    font-weight: bold;
    color: #767676;
  }

  .label-txt {
    font-size: 8pt;
    margin-top: 5px;
  }

  .label-cube {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .box-card {
    margin-top: 10px;
  }
}
</style>
